<template>
  <div>
    <div class="container1">
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">人才简历查询条件</div>
      </div>
      <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="100px" style="margin-bottom:-10px;margin-top:10px;">
        <el-form-item label="投递公司" v-if="typeCode == 'society'">
          <el-input v-model="searchObj.companyName" placeholder="请输入投递公司" clearable></el-input>
        </el-form-item>
        <el-form-item label="招聘会名称">
          <el-input v-model="searchObj.title" placeholder="请输入招聘会名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input v-model="searchObj.nativePlace" placeholder="请输入籍贯" clearable></el-input>
        </el-form-item>
        <el-form-item label="投递岗位" v-if="typeCode == 'business'">
          <el-input v-model="searchObj.applyPosition" placeholder="请输入投递岗位" clearable></el-input>
        </el-form-item>
        <el-form-item label="学历要求">
          <el-select v-model="searchObj.highEducation" placeholder="请选择学历要求">
            <el-option v-for="item in educationOptions" :key="item.dictionaryCode" :label="item.dictionaryName" :value="item.dictionaryCode">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left:2rem;">
          <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
          <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container" style="margin-top:1rem;">
      <div class="common-list-class">
        <div style="display:flex;">
          <div class="common-title-div"></div>
          <div class="common-title-text">人才简历查询列表</div>
        </div>
        <div style="display:flex;">
          <!-- <el-upload
                    class="upload-file"
                    :headers="uploadHeader"
                    :before-upload="beforeUpload"
                    :action="uploadUrl"
                    :on-success="uploadSucess"
                    :on-error="uploadError"
                    :on-progress="uploadProgress"
                    :show-file-list="false">
                        <el-button type="primary" icon="el-icon-download">批量导入</el-button>
                    </el-upload>
                    <el-button type="primary" size="mini" style="height:32px;margin-left:10px;" @click="allExportClick" icon="el-icon-position">下载模版</el-button> -->
          <el-button type="primary" style="height:32px;" size="mini" icon="el-icon-position" @click="addPolice">批量下载</el-button>
        </div>
      </div>
      <!-- 查询列表 -->
      <el-table :data="tableData" size="mini" :row-style="rowStyle" @selection-change="handleSelectionChange" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
        <el-table-column type="selection" width="50" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="nativePlace" label="籍贯" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="educationDesc" label="学历" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="title" label="招聘会名称" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="companyName" v-if="typeCode == 'society'" label="投递公司" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="applyPosition" v-if="typeCode == 'business'" label="投递岗位" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">详 情</el-button>
            <el-button type="success" size="mini" icon="el-icon-download" @click="downloadClick(scope.row)">下载附件简历</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </div>
    <!-- 流程图展示 -->
    <el-dialog title="流程图展示" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="progressFlag" width="40%" :before-close="progressClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">流程图展示</div>
      </div>
      <div>
        <el-timeline>
          <el-timeline-item v-for="(item,index) in progressList" :key="index" icon="el-icon-success" type="primary" size="large" :timestamp="item.operateTime" placement="top">
            <el-card class="el_card_class">
              <h4>{{item.operateUser}}</h4>
              <div style="font-size:12px;">{{item.rebackContent}}</div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="progressClose">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 反馈-->
    <el-dialog title="反馈内容" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="newaddFlag" width="50%" :before-close="handleClose" center>
      <el-form ref="inputObj" :model="inputObj" label-width="120px" :rules="rules">
        <el-form-item label="反馈内容" prop="remark">
          <el-input v-model="inputObj.remark" type="textarea" placeholder="请输入反馈内容" maxlength="300" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 人才简历详情 -->
    <el-dialog title="详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="detailsFlag" width="40%" :before-close="detailsClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">详情</div>
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">姓名</el-col>
        <el-col :span="15" class="grey-class" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{detailsObj.name}}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">性别</el-col>
        <el-col :span="15" class="grey-class">{{detailsObj.sexDesc}}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">身份证</el-col>
        <el-col :span="15" class="grey-class">{{detailsObj.identity}}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">籍贯</el-col>
        <el-col :span="15" class="grey-class">{{detailsObj.nativePlace}}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">婚姻状态</el-col>
        <el-col :span="15" class="grey-class">{{detailsObj.isMarryDesc}}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">学历信息</el-col>
        <el-col :span="15" class="grey-class">{{detailsObj.highEducationDesc}}</el-col>
      </el-row>
      <el-row type="flex" justify="center" v-if="typeCode == 'society'">
        <el-col :span="4" class="bold-class">投递公司</el-col>
        <el-col :span="15" class="grey-class" :title="detailsObj.companyName" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{detailsObj.companyName}}</el-col>
      </el-row>
      <el-row type="flex" justify="center" v-if="typeCode == 'business'">
        <el-col :span="4" class="bold-class">投递岗位</el-col>
        <el-col :span="15" class="grey-class" :title="detailsObj.applyPosition" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{detailsObj.applyPosition}}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">招聘会名称</el-col>
        <el-col :span="15" class="grey-class" :title="detailsObj.title" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{detailsObj.title}}</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
export default {
  name: "talentResume",
  mixins: [mixin],
  data() {
    return {
      selectionList: [],
      educationOptions: [],
      createTime: [],
      progressFlag: false,
      uploadHeader: {},
      progressList: [
        {
          time: "2020-12-20",
          operate: "企业代表",
          progressContent: "进行了什么操作",
        },
        {
          time: "2020-12-21",
          operate: "企业负责人",
          progressContent: "进行了什么操作",
        },
        {
          time: "2020-12-22",
          operate: "劳务公司",
          progressContent: "进行了什么操作",
        },
        {
          time: "2020-12-23",
          operate: "劳务代表",
          progressContent: "进行了什么操作",
        },
      ],
      uploadUrl: "https://jsonplaceholder.typicode.com/posts/",
      rules: {
        remark: [
          { required: true, message: "请输入反馈内容", trigger: "blur" },
        ],
      },
      detailsObj: {
        companyName: "江苏省南京市有限公司",
        industyType: "IT行业",
        relationMan: "张三",
        positionPost: "负责人",
        relationPhone: "139282930303",
        companyStation: "南京市新港区29号",
        companyPhone: "025-12321321321",
      },
      inputObj: {
        companyName: "",
        industyType: "",
        relationMan: "",
        positionPost: "",
        relationPhone: "",
        companyStation: "",
        companyPhone: "",
      },
      detailsFlag: false,
      isEditTitle: "",
      newaddFlag: false,
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      tableData: [],
      searchObj: {},
    };
  },
  created() {
    this.queryEducation();
    this.query();
  },
  methods: {
    queryEducation() {
      let params = {
        dictionaryType: "education",
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/dictionary/queryDictionary`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            let list = res.data.data;
            list.unshift({
              dictionaryCode: "",
              dictionaryName: "全部",
            });
            this.educationOptions = list;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    downloadClick(row) {
      window.open(row.resumedAddress);
      // let self = this;
      // let list = [row.id];
      // self.showLoading("操作中");
      // self.$axios({
      // method: "post",
      // headers: {
      //     Authorization: self.requestToken,
      // },
      // url: `/labour/exportResumeExcel`,
      // responseType: "blob",
      // data: list,
      // }).then((res) => {
      //     self.hideLoading();
      //     console.log(res);
      //     if (res.status == 200) {
      //         let href = window.URL.createObjectURL(new Blob([res.data], {type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",}));
      //         let link = document.createElement("a");
      //         link.style.display = "none";
      //         link.href = href;
      //         link.setAttribute("download", `人才简历导出.xlsx`);
      //         document.body.appendChild(link);
      //         link.click();
      //         document.body.removeChild(link);
      //         window.URL.revokeObjectURL(href);
      //     } else {
      //         self.$message.error(`简历导出失败！`);
      //     }
      // }).catch((err) => {
      //     self.hideLoading();
      //     self.$message.error(err);
      // });
    },
    addPolice() {
      let self = this;
      if (!self.selectionList || !self.selectionList.length) {
        self.$message.error("请选择下载简历！");
        return;
      }
      let list = self.selectionList.map((value) => value["openId"]);
      self.showLoading("操作中");
      self
        .$axios({
          method: "post",
          headers: {
            Authorization: self.requestToken,
          },
          url: `/hire/exportBatchResume`,
          responseType: "blob",
          data: list,
        })
        .then((res) => {
          self.hideLoading();
          console.log(res);
          if (res.status == 200) {
            let href = window.URL.createObjectURL(
              new Blob([res.data], {
                type:
                  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
              })
            );
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = href;
            link.setAttribute("download", `人才简历导出.xlsx`);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(href);
          } else {
            self.$message.error(`人才简历导出失败！`);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    allExportClick() {},
    handleSelectionChange(val) {
      this.selectionList = val;
    },
    query() {
      let params = {
        companyName: this.searchObj.companyName,
        title: this.searchObj.title,
        applyPosition: this.searchObj.applyPosition,
        nativePlace: this.searchObj.nativePlace,
        highEducation: this.searchObj.highEducation,
        pageNumber: this.currentPage,
        pageSize: this.pagesize,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/hire/queryResumeByPage`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        // params: params
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.tableData = res.data.data.list;
            this.pagesize = res.data.data.pageSize;
            this.total = res.data.data.total;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    beforeUpload(file) {
      this.showLoading("导入中");
    },
    uploadProgress(event, file, fileList) {
      this.videoUploadPercent = file.percentage.toFixed(0) + "%";
      console.log("event--------", event);
      console.log("file--------", file);
      console.log("fileList--------", fileList);
    },
    uploadSucess(response) {
      this.$message({
        message: "导入成功！",
        type: "success",
      });
      this.hideLoading();
      console.log("response------", response);
    },
    uploadError(error) {
      this.$message({
        message: "导入失败！",
        type: "error",
      });
      this.hideLoading();
      console.log("error-----", error);
    },
    // 新建确认和修改确认
    submit() {},
    // 取消点击
    cancel() {
      this.newaddFlag = false;
      this.$refs["inputObj"].resetFields();
      this.inputObj = {};
    },
    // 取消点击
    handleClose() {
      this.cancel();
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      this.query();
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.query();
    },
    //  重置
    reset() {
      this.searchObj = {};
      this.query();
    },
    progressClose() {
      this.progressFlag = false;
    },
    progressClick(row) {
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/labourMicro/queryMicroInfoByProcessCode/${row.labourProcessCode}`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          this.hideLoading();
          if (res.data.code == "20000") {
            this.progressFlag = true;
            this.progressList = res.data.data;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 详情
    detailsClick(row) {
      this.showLoading();
      let params = {
        resumeId: row.id,
      };
      this.$axios({
        method: "get",
        url: `/hire/queryResumeDetail`,
        headers: {
          Authorization: this.requestToken,
        },
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          if (res.data.code == "20000") {
            this.detailsFlag = true;
            this.detailsObj = res.data.data;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 详情关闭
    detailsClose() {
      this.detailsFlag = false;
    },
    // 修改
    editClick() {
      this.newaddFlag = true;
    },
  },
};
</script>
<style scoped>
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 100px;
  height: 36px;
}
.el_card_class >>> .el-card__body {
  padding: 10px !important;
}
</style>